{% extends 'layout.html' %}

{% block css %}
<style>
    *{ margin:0; padding:0; list-style:none;}
    a{ text-decoration:none;}
    a:hover{ text-decoration:none;}
    .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;}
    .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;    line-height: 25px;
    padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
    .tcdPageCode a.active{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color:
    #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode a.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;
    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
</style>
{% endblock %}

{% block content %}
    {% load my_tags %}
    {% csrf_token %}
    <div class="panel panel-primary">
        <div class="panel-heading text-center">
            <h3 class="panel-title">学生信息展示</h3>
        </div>
        <div class="panel-body">
            <form action="" method="get">
                <button class="btn btn-success btn-sm pull-right">
                    查询
                </button>
                <input type="text" placeholder="模糊查询" name="query" class="pull-right">
            </form>
            <form action="" method="post">
                {% csrf_token %}
                <table class="table table-striped table-bordered table-hover">
                    <select name="operate">
                        {#                        1 --> 公户转私户#}
                        {% if request.path_info == '/crm/client/' %}
                            <option value="multi_pri" selected>公户转私户</option>
                        {% else %}
                            <option value="multi_pub" selected>私户转公户</option>
                        {% endif %}
                    </select>
                    <button class="btn btn-success btn-sm">
                        确定
                    </button>
                    <tr>
                        <td>选择</td>
                        <td>序号</td>
                        <td>学生ID</td>
                        <td>QQ号</td>
                        <td>QQ名称</td>
                        <td>学生姓名</td>
                        <td>性别</td>
                        <td>出生日期</td>
                        <td>手机号</td>
                        <td>来源</td>
                        <td>班级类型</td>
                        <td>状态</td>
                        <td>销售</td>
                        <td>操作</td>
                    </tr>
                    {% for client in client_list %}
                        <tr>
                            <td><input type="checkbox" value="{{ client.id }}" name="user_list"></td>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ client.id }}</td>
                            <td>{{ client.qq }}</td>
                            <td>{{ client.qq_name }}</td>
                            <td>{{ client.name }}</td>
                            <td>{{ client.get_sex_display }}</td>
                            <td>{{ client.birthday|default:'无' }}</td>
                            <td>{{ client.phone|default:'空' }}</td>
                            <td>{{ client.get_source_display }}</td>
                            <td>{{ client.get_class_type_display|default:'空' }}</td>
                            <td>{{ client.show_status }}</td>
                            <td>{{ client.consultant.name }}</td>
                            <td>
                                <a href="{% reverse_url request 'edit_client' client.id %}"
                                   class="btn btn-primary btn-sm">修改</a>
                                <a href="{% reverse_url request 'client_record' client.id %}"
                                   class="btn btn-success btn-sm">跟进记录</a>
                                <button type="button" class="btn btn-danger btn-sm del" id="{{ client.id }}">删除</button>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
                <a href="{% reverse_url request 'add_client' %}" class="btn btn-success">新增</a>
                <div class="tcdPageCode">
                    {{ page_html }}
                </div>
            </form>
        </div>
    </div>
    <script>
        $('.del').click(function () {
            $.ajax({
                url: '/crm/del_client/',
                type: 'post',
                headers: {
                    'x-csrftoken': $('[name="csrfmiddlewaretoken"]').val(),
                },
                data: {
                    id: $(this).attr('id')
                },
                success: (res) => {
                    $(this).parent().parent().remove()
                }
            })
        })
    </script>

{% endblock %}